<template>
  <div class="dns-status">
    <el-tooltip
      placement="top"
      trigger="hover"
      :disabled="!$slots.tooltip"
      popper-class="max-w-[500px]"
    >
      <el-tag :type="statusConfig.type" class="tag">
        <el-icon size="14" class="icon mr-1">
          <CircleCheck v-if="status === 1" />
          <Warning v-if="status === 2" />
        </el-icon>
        <span>{{ statusConfig.text }}</span>
      </el-tag>
      <template #content>
        <slot name="tooltip"></slot>
      </template>
    </el-tooltip>
  </div>
</template>

<script setup lang="ts">
import { CircleCheck, Warning } from '@element-plus/icons-vue'

interface IProps {
  status: number
}

interface StatusConfig {
  type: '' | 'success' | 'warning' | 'danger' | 'info'
  text: string
}

const props = defineProps<IProps>()

const statusMap = computed(() => {
  return {
    1: {
      type: 'success',
      text: '正常'
    },
    2: {
      type: 'warning',
      text: '异常'
    }
  }
})

const statusConfig = computed<StatusConfig>(() => {
  if (props.status in statusMap.value) {
    return statusMap.value[props.status]
  }
  return {
    type: '',
    text: ''
  }
})
</script>

<style scoped lang="scss">
.tag {
  @apply px-1.5;
  cursor: pointer;
}
.icon {
  transform: translateY(2px);
}
</style>
